<script setup lang="ts">
import { useTheme } from '~/composables/useTheme';

const { theme, toggleTheme } = useTheme();
</script>

<template>
  <button @click="toggleTheme" class="px-4 py-2 rounded-full font-medium transition-colors duration-200" :class="{
    'bg-gray-200 text-gray-800 hover:bg-gray-300': theme === 'light',
    'bg-gray-800 text-gray-200 hover:bg-gray-700': theme === 'dark',
  }">
    切换到 {{ theme === 'light' ? '暗色模式' : '浅色模式' }}
  </button>
</template>